<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>报备</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__/aui.css"/>
    <link href="__JSS__/plugins/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="__CSS__/css/ydui.css">
    <link rel="stylesheet" href="__CSS__/css/demo_1.css">
    <link rel="stylesheet" href="__FILE__/css/upload.css">
    <style>
        #header{
            position: fixed;
            top: 0;
            left: 0;
            clear: both;
        }
        body{
            padding-top:56px;
        }
        .aui-bar-nav .aui-pull-left{
            padding-left: 0;
        }
        .aui-iconfont-tu{
            min-height: 2.8rem;
            width: 2.2rem;
            background: url(__IMG__/back.png) no-repeat center center;
            background-size: 44px 44px;
        }
        .tit{
            padding:0.75rem 0.8rem;
            align-items: center;
            font-size: 14px;
            font-weight: 500;
            color: #000000;
        }
        .xian{
            width: 3px;
            height: 14px;
            background: #62C3D0;
            margin-right:0.35rem;
        }
        .box{
            background-color: #fff;
            padding-left: 0.8rem;
        }
        .one{
            height:2.8rem;
            align-items: center;
            font-size: 14px;
            font-weight: 400;
            color: #242424;
        }
        .one1{
            padding: 10px 0;
            font-size: 14px;
            font-weight: 400;
            color: #242424;
        }
        .one textarea{
            height: 100px;
            width: 100%;
            padding: 1px 5px;
            background-color: #fff;
            border: 1px solid #DBCFDB;
            margin-top: 15px;
        }

        .red{
            color: #F24860;
        }
        input[type="text"],input[type="tel"] {
            border: none;
            width: 100%;
            padding: 0 0.75rem;
            line-height: normal;
            font-size: 0.8rem;
            border-radius: 0;
            background-color:transparent;
            margin: 0 auto;
            color: #A6A6A6;
            text-align: right;
        }
        ::-webkit-input-placeholder {
            color: #A6A6A6;
        }
        .button{
            padding:1rem 2.45rem;
        }
        .btn{
            text-align: center;
            line-height: 1.8rem;
            height: 1.8rem;
            background: #62C3D0;
            border-radius: 0.9rem;
            font-size: 16px;
            font-weight: 500;
            color: #FFFFFF;
        }


    </style>
    <style>
        #container{
            height: 15rem;margin-top: 2.8rem;
        }
        #myPageTop{
            top: 2.8rem;
        }
        #tipinput{
            border: 1px solid gray;
            height:auto;
            padding: 0;
            text-align: left;
        }
    </style>
    <style>
        /*html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}*/

        /*body{font-size: 14px;}*/
        /*h1{font-size: 26px;}*/
        /*p{font-size: 14px; margin-top: 10px;}*/
        /*pre{background:#eee;border:1px solid #ddd;border-left:4px solid #f60;padding:15px;margin-top: 15px;}*/
        /*h2{font-size: 20px;margin-top: 20px;}*/
        .case{
            z-index: 99999;
        }
        /*td{padding:5px;}*/
        .delete{
            position: absolute;
            top:0;
            right:0;
            /*margin-top: -15px;*/
            color: #000;
            z-index: 99999;
            width: 20px;
        }
        .upload.multiple.empty .add{
            z-index: 1;
        }
    </style>
</head>

<body id="body">
<header class="aui-bar aui-bar-nav underLine" id="header">
    <a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-iconfont-tu"> </span> </a>
    <div class="aui-title">报备</div>
</header>
{if $userInitInfo.user_submit == 1}
<br/>
&nbsp;&nbsp;&nbsp;&nbsp;您没有报备权限，请联系管理员开通！
{else /}
<form id="addShop">


    <div class="tit flex-wrap" style="margin-top: 15rem">
        <span class="xian"></span>
        <div>详细地址添加</div>
    </div>
    <div class="box">
        <div class="one flex-wrap underLine">
            <div>公司地址</div>
            <input type="text" id="J_Address" name="address" class="flex-con" placeholder="选择所在地区" readonly >
        </div>
        <div class="one flex-wrap underLine">
            <div>详细地址</div>
            <input type="text" name="addressDetail" class="flex-con" placeholder="详细地址：如道路、门牌号等">
        </div>
        <div class="one flex-wrap underLine">
            <div>经纬度</div>
            <input type="text" name="lonlat" id="lonlat" class="flex-con" placeholder="请点击地图上的位置获取经纬度" readonly>
        </div>
    </div>
    <div id="container"></div>
    <div id="myPageTop">
        <table>
            <tr>
                <td>
                    <label>请输入关键字：</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="tipinput" type="text" />
                </td>
            </tr>
        </table>
    </div>


    <div class="tit flex-wrap">
        <span class="xian"></span>
        <div>基本信息</div>
    </div>
    <div class="box">
        <div class="one flex-wrap underLine">
            <div><span class="red">*</span>报备日期</div>
            <input type="text" name="s_time" class="flex-con" placeholder="默认当天日期" value="<?php echo date('Y-m-d'); ?>" readonly>
        </div>
        <div class="one flex-wrap underLine">
            <div><span class="red">*</span>有效日期</div>
            <input type="text" name="s_endtime" class="flex-con" placeholder="后台自动生成的日期" value="<?php echo date('Y-m-d',time()+(3600*24*20)); ?>" readonly>
        </div>
        <div class="one flex-wrap underLine">
            <div><span class="red">*</span>公司老师</div>
            <input type="text" name="s_inside_name" class="flex-con" placeholder="请输入姓名">
        </div>
        <div class="one flex-wrap underLine">
            <div><span class="red">*</span>公司老师电话</div>
            <input type="tel" name="s_inside_phone" class="flex-con" placeholder="请输入电话">
        </div>
    </div>


    <div class="tit flex-wrap">
        <span class="xian"></span>
        <div>联系信息</div>
    </div>
    <div class="box">
        <div class="one flex-wrap underLine">
            <div><span class="red">*</span>店名/地名</div>
            <input type="text" name="s_com_name" class="flex-con" placeholder="请输入店名">
        </div>
    </div>
    <div class="box">
        <div class="one flex-wrap underLine">
            <div><span class="red">*</span>联系人</div>
            <input type="text" name="s_name" class="flex-con" placeholder="请输入名称">
        </div>
        <div class="one flex-wrap underLine">
            <div>微信号</div>
            <input type="text" name="s_wx_name" class="flex-con" placeholder="请输入微信号">
        </div>
        <div class="one flex-wrap underLine">
            <div><span class="red">*</span>联系电话</div>
            <input type="text" name="s_phone" class="flex-con" placeholder="请输入电话">
        </div>
        <div class="one flex-wrap underLine">
            <div>联系电话2</div>
            <input type="text" name="s_phone1" class="flex-con" placeholder="请输入电话">
        </div>
        <div class="one flex-wrap underLine">
            <div>联系电话3</div>
            <input type="tel" name="s_phone2" class="flex-con" placeholder="请输入电话">
        </div>
        <input type="hidden" name="s_type" value="2" />
        <div class="one1 flex-wrap underLine" style="align-items: baseline;">
            <div style="width: 15%"><span class="red">*</span>等级</div>
            <div style="padding-left: 10px;">
                <input type="radio" name="s_role" class="flex-con" value="3" id="na" checked><label for="na"> 区域加盟商</label>&nbsp;&nbsp;&nbsp;
                <input type="radio" name="s_role" class="flex-con" value="4" id="nv"><label for="nv"> 县级运营商</label>
                <br>
                <br>
                <input type="radio" name="s_role" class="flex-con" value="5" id="yj"><label for="yj"> 市级分公司</label>&nbsp;&nbsp;&nbsp;
                <input type="radio" name="s_role" class="flex-con" value="6" id="yz"><label for="yz"> 省级子公司</label>
            </div>
        </div>
        <div class="one flex-wrap underLine">
            <div><span class="red">*</span>沟通要点</div>
        </div>
        <div class="one flex-wrap underLine" style="margin-right: 20px;">
            <textarea name="s_content" class="flex-con" placeholder="沟通要点不得少于50字"></textarea>
        </div>
        <br/>
        <div class="one flex-wrap underLine">
            <div>备注信息</div>
        </div>
        <div class="one flex-wrap underLine" style="margin-right: 20px;">
            <textarea name="s_remark" class="flex-con" placeholder="备注信息不得少于50字"></textarea>
        </div>
    </div>
    <br/>

    <!---->
    <div class="tit flex-wrap">
        <span class="xian"></span>
        <div>聊天信息截图</div>
    </div>

    <!---->
    <div style="width: 100%;height: 1px;clear: both">&nbsp;</div>
    <div class="case">
        <!--data-value：逗号隔开-->
        <div class="upload" action="/bo/Upload/uploadImgBendi" id="case1"></div>
    </div>
    <input type="hidden" name="areaid" id="areaid" value="" />

</form>
<div class="button">
    <div class="btn">保存</div>
</div>
{/if}
</body>
{include file="public/footer" /}
</html>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=3e1efc9bcd502e8d0ded020ee743130c&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script src="__JS__/js/ydui.citys.js"></script>
<script src="__JS__/js/ydui.js"></script>
<script src="__FILE__/js/jQuery.upload.min.js"></script>
<script type="text/javascript" src="__JS__/wk.js"></script>
<script type="text/javascript">
    $('.btn').click(function () {

        $.ajax({
            url: '/bo/Addshop/commitShop',
            data: $('#addShop').serialize(),
            type: 'POST',
            dataType: 'JSON',
            success: function (returnData) {
                if(returnData.status == 200){
                    layer.open({
                        content: returnData.msg
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                    location.href = '{:url("bo/My/index")}';
                }else{
                    layer.open({
                        content: returnData.msg
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }
            },
            error: function () {
                alert('服务器错误，请刷新重试！');
            }
        })
    });
</script>
<script type="text/javascript">
    /**
     * 省市区街道四级联动
     * @type {*}
     */
    var $target = $('#J_Address');
    $target.citySelect();
    $target.on('click', function (event) {
        event.stopPropagation();
        $target.citySelect('open');
    });
    $target.on('done.ydui.cityselect', function (ret) {
        $(this).val(ret.country + ' ' + ret.provance + ' ' + ret.city);
        $('#areaid').val(ret.id);
        dingwei(ret.provance + ret.city)
    });
    /**
     * 图片上传
     */
    $(function(){
        $("#case1").upload();
    })

    /**
     * 地图加载
     * @type {AMap.Map}
     */
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //输入提示
    var autoOptions = {
        input: "tipinput"
    };
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
        map: map,
//        pageSize:1
    });
    //构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  //关键字查询查询
        //搜索结果一出来就先获取经纬度
//        var lng = e.poi.location.lng;   //获取经度
//        var lat = e.poi.location.lat;
//        document.getElementById("lonlat").value = lat + ',' + lng;
//        map.clearMap();
    }
    //点击marker获取经纬度（和地图上点的取值方式不一样，所以单独设置）
    AMap.event.addListener(placeSearch, "markerClick", markerAddGetLnla);
    function markerAddGetLnla(e) {
        document.getElementById("lonlat").value = e.data.location.lat + ',' + e.data.location.lng;
    }
    /**
     * 点击地图获取经纬度
     */
    //为地图注册click事件获取鼠标点击出的经纬度坐标
    map.on('click', function(e) {
        document.getElementById("lonlat").value = e.lnglat.getLat() + ',' + e.lnglat.getLng();
    });
    function dingwei(address) {
        var geocoder;
        if(!geocoder){
            geocoder = new AMap.Geocoder({
//                                                            city: "010", //城市设为北京，默认：“全国”
            });
        }
        geocoder.getLocation(address, function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                var lnglat = result.geocodes[0].location;
                map.setCenter(lnglat);
//                map.setZoom(11);
            }
        });
    }
</script>

